<template>
	<view :style="{'--page-bg':pageBg}" style="float: left;width: 100%;min-height: 100%;">
		<u-navbar-white is-back="true" :border-bottom="false" title-color="" back-icon-color="" title="分类">
		</u-navbar-white>
		
			
			<view  class="tn-padding-bottom-sm">
				<HM-dragSorts-class ref="dragSorts" :list="itemList" :autoScroll="true" :feedbackGenerator="true"
					:listHeight="fullHeight" :rowHeight="55" @change="change" @updataList="updataList" @confirm="confirm"
					@goEdit="goEdit"></HM-dragSorts-class>
			</view>
			
			
			<view class="write_btn" @click="goAdd(0)">
				<u-icon class="icon" name="plus"></u-icon>
			</view>

			<mypopup title="" :mask="false" v-model="show_popup_check_bottom" height="230rpx" :showHeader="false"
				style="position: relative;" class="css-theme" :class="[cueTheme]">
				<view
					style="width: 60px;height: 10rpx;background-color: #ccc;position: absolute; top:5px;margin-left: 320rpx;border-radius: 20px;">
				</view>
				<view class="nav-list-popup " style="padding: 80rpx 100rpx 40rpx 100rpx;">

					<block>
						<view @click="goAdd(1)"
							class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between">
							<view class="tn-icon-write icon-order">
							</view>
							<view class="nav-link">
								<view class='title'>编辑</view>
							</view>
						</view>
					</block>
					<block>
						<view @click="goDel()"
							class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between">
							<view class="tn-icon-delete icon-order">
							</view>
							<view class="nav-link">
								<view class='title'>删除</view>
							</view>
						</view>
					</block>

				</view>

			</mypopup>

			<tn-modal v-model="modal_show" @click="delModalClick"></tn-modal>
	</view>
</template>
<script>
	var _self
	import mypopup from '@/components/hqs-popup/hqs-popup.vue'
	export default {
		components: {
			mypopup,
		},
		data() {
			return {
				modal_show: false,
				show_popup_check_bottom: false,
				itemCheck: {},
				itemList: [
					
				],
				itemListOut: [],
				user: [],
				type:0,//801 分数， 802奖品   803学习计划科目
				fullHeight:0
			}
		},
		watch: {
			show_popup_check_bottom: {
				handler(newCheck, oldCheck) {
					if (newCheck == false) {
						this.itemCheck = {}
					}
				}
			}
		},
		onLoad(options) {
			_self = this;
			_self.type = options.type
		},
		onShow() {
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						setTimeout(function() {
							_self.getList()
						}, 200);

					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})

		},
		mounted() {
			var that = this;
			//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = res.windowHeight
				}
			});
		
		},
		methods: {
			change(e) {
				console.log('=== change start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== change end ===');
			},
			confirm(e) {
				console.log(e)
				var list = e.list
				var data = []
				for (var i = 0; i < list.length; i++) {
					var item = {
						id: list[i].id,
			
					}
					data.push(item)
				}
			
				console.log("========================")
				console.log(data)
				this.$api.appSortType(data).then((res) => {
					var resData = res;
					console.log(resData)
					if (resData.code == "200") {
						_self.getList()
					}
				})
			},
			updataList() {
				_self.getList()
			},
			checkThis(item) {
				this.show_popup_check_bottom = true;
				this.itemCheck = item
			},


			getList() {
				var data = {
					userId: _self.user.id,
					category:_self.type
				}
				console.log(data)
				this.$api.listTypeCommonList(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.itemList = resData.data;
					}
				})


			},
			goDel() {
				this.modal_show = true;
			},
			delModalClick(e) {
				this.modal_show = false;
				if (e.index == 1) {
					_self.$api.deleteTypeCommon({}, _self.itemCheck.id).then((res) => {
						var resData = res;
						if (resData.code == "200") {
							_self.getList()
						}
					})
				}
				_self.show_popup_check_bottom = false;
			},

			goEdit(e) {
				uni.navigateTo({
					url: '/pages/common/addClass?id=' + e.id + "&userId=" + _self.user.id +
						"&name=" +
						e.name + "&remark=" + e.remark + "&type=" + _self.type
				});
			},
			goAdd(item) {
				if (item == 0) {
					uni.navigateTo({
						url: '/pages/common/addClass?id=0' + "&userId=" + _self.user.id+"&type="+_self.type
					});
				} else if (item == 1) {
					_self.show_popup_check_bottom = false;
					uni.navigateTo({
						url: '/pages/common/addClass?id=' + _self.itemCheck.id + "&userId=" + _self.user.id +
							"&name=" +
							_self.itemCheck.name + "&remark=" + _self.itemCheck.remark+"&type="+_self.type
					});
				} else {
					uni.navigateTo({
						url: '/pages/common/addClass?id=' + item.id + "&userId=" + _self.user.id +
							"&name=" +
							item.name + "&remark=" + item.remark+"&type="+_self.type
					});
				}
			},
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		background-color: $page-bg !important;
	}

	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}


	.uni-page-head {
		display: none;
	}

	.container {
		padding: 20px;
	}



	.category-item {
		width: 49%;
		margin-bottom: 8px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		background-color: #FFFFFF;
		border-radius: 8px;
		cursor: pointer;
		transition: background-color 0.3s ease;
		height: 110rpx;
	}

	.category-icon {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}

	.category-name {
		font-size: 14px;
	}

	.content {
		display: flex;
		// flex-direction: column;
		width: 100%;
		flex: 1;
		padding: 30rpx;

		.nav {
			border-top: 1rpx solid #f2f2f2;
			// background-color: #fceeee;    
			position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			height: 100rpx;

			.tab-scroll {
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;

					.tab-scroll_item {
						line-height: 60rpx;
						margin-right: 35rpx;
						flex-shrink: 0;
						padding-bottom: 10px;
						display: flex;
						justify-content: center;
						font-size: 16px;
						padding-top: 10px;
					}
				}
			}
		}

		.swiper-content {
			padding-top: 90rpx;
			flex: 1;

			.swiperitem-content {
				background-color: $page-bg;

				.nav_item {
					background-color: $page-bg;
					// padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}
	}

	.active {
		position: relative;
		// color: #000000;
		font-weight: 600;
		font-size: 18px !important;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.top_view_time {
		float: left;

		width: 40%;
		text-align: left;

	}

	.top_view {
		float: left;

		width: 30%;
		text-align: center;
	}



	.top_view_right {
		float: left;

		width: 30%;
		text-align: right;

	}

	.item_back {
		width: 90%;
		margin-left: 5%;
		float: left;

	}

	.addbtn {
		height: 36px;
		line-height: 36px;
		border-top: 1px solid #ccc;
		position: fixed;
		bottom: 0px;
		width: 100%;
		text-align: center;
	}



	.nav-list-popup {
		display: flex;
		/* padding: 0rpx 12rpx 0rpx; */
		justify-content: space-between;

		/* 列表元素 start */
		.nav-list-item {
			/* padding: 20rpx 30rpx; */
			border-radius: 12rpx;
			width: 45%;
			/* margin: 0 18rpx 40rpx; */
			background-size: cover;
			background-position: center;
			position: relative;
			z-index: 99;

			/* 元素标题 start */
			.nav-link {
				font-size: 14px;
				text-transform: capitalize;
				/* padding: 0 0 10rpx 0; */
				position: relative;

				.title {
					margin-top: 10rpx;
					text-align: center;
				}
			}

			/* 元素标题 end */

			/* 元素图标 start */
			.icon {
				font-variant: small-caps;
				width: 90rpx;
				height: 90rpx;
				line-height: 90rpx;
				margin: 0;
				padding: 0;
				display: inline-flex;
				text-align: center;
				justify-content: center;
				vertical-align: middle;
				font-size: 50rpx;
				color: #FFFFFF;
				white-space: nowrap;
				opacity: 0.9;
				background-color: rgba(0, 0, 0, 0.05);
				background-size: cover;
				background-position: 50%;
				border-radius: 5000rpx;
			}

			/* 元素图标 end */
		}

		/* 列表元素 end */
	}

	.icon-order {
		font-size: 20px;
	}

	.hidden_text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.write_btn {
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: $uni-theme-color;
		z-index: 100;
		display: flex;

		.icon {
			justify-content: center;
			width: 100%;
			color: #FFFFFF;
			font-size: 50rpx;
			/* #ifdef MP-TOUTIAO */
			// 头条小程序 没居中
			text-align: center;
			padding: 15rpx 0;
			/* #endif */
		}
	}

	.item_matter_1 {
		float: left;
		height: 50px;
		line-height: 50px;
		width: 70%;
		display: flex;
		padding-left:15px ;
	}

	.item_matter {
		float: right;
		width: 30%;
		text-align: right;
		height: 50px;
		line-height: 50px;
		font-weight: bolder;
		padding-right: 10px;
	}

	// .item_matter text{
	// 	float: right;
	// }
	.grid-text-matter {
		float: left;
		padding-left: 5px;
		font-weight: bolder;
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 1;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.u-grid-item-cls-matter {
		width: 8px;
		height: 8px;
		border-radius: 50%;

		text-align: center;
		vertical-align: middle;
		margin-top: 21px;
	}

	.item_box {
		display: flex;
		// justify-content: space-between;
		// align-items: center;
		padding: 5rpx 10rpx;
		border-radius: 4px;
		margin: 16rpx 0rpx;
	}
</style>